<template>
    <div class="header">
        <p id="p1" @click="msg = '抠你鸡娃' ">这是p标签 -- {{ msg }}</p>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg: 'hello',
                list: [],
                timer: null
            }
        },
        methods: {
            fn () {
                console.log('fn被调用')
            },
        },

        // 钩子虽然是函数，但是千万别写到methods里，它跟methods是平级的
        beforeCreate () {
            console.log('beforeCreate', this.msg) // undefined
            // this.fn() // 会报错
        },

        created () {
           this.timer = setInterval(() => {
                console.log('我在执行')
            }, 1000);
            console.log('created', this.msg) // hello
            // this.fn() // 会正常调用

            // 经常在这里发请求初始化数据
        },

        beforeMount () {
            console.log('beforeMount', document.querySelector('#p1')) // null
        },

        mounted () {
            console.log('mounted', document.querySelector('#p1')) // 找到p1dom元素
        },

        beforeUpdate () {
            // debugger
            console.log('beforeUpdate', this.msg)
        },

        updated () {
            // debugger
            console.log('updated', this.msg)
        },

        beforeDestroy () {
            console.log('beforeDestroy')
        },

        destroyed () {
            console.log('destroyed')
            clearInterval(this.timer)
        }
    }
</script>

<style>
    .header {
        height: 50px;
        background-color: #f00;
    }
</style>